<template>
  <div class="top-title">
    <div class="one-title">
      <img class="bt-svg" src="http://mcgamehome.love/img2/e4513f4ab53a1860126d4d6a6e801abeeb28d40f.png">
      <span  class="title-one span-def">点击最多的视频</span>
    </div>
  </div>
  <div class="tv-waikeB">
    <div class="tv-show-box p-r">
      <div class="show-tv-one p-r">
        <video class="video-de" ref="videoJ" controls="" :src="tvLj2"></video>
      </div>
      <div class="xq-tv-one p-a" ref="backColor">
        <div class="maskImg p-a"></div>
        <div class="xq-list-one p-r">
          <div class="back-img p-a">
            <img :src="backImg" class="backImg" :alt="backImg">
          </div>
          <div class="title-bt span-def c-white" v-text="tvName" :title="tvName"></div>
          <div class="pf-box">
            <div class="pf-one">
              <span class="pf-title num-def c-white" v-text="pf"></span>
            </div>
            <div class="dp-box">
              <div class="start">
                <svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" class="star full" data-v-4b953483=""><path opacity="0.8" d="M9.04185 3.56305C8.48489 3.47719 7.97077 3.09084 7.75656 2.5757L6.77117 0.515139C6.47127 -0.171713 5.52873 -0.171713 5.18598 0.515139L4.24344 2.5757C3.98638 3.09084 3.51511 3.47719 2.95815 3.56305L0.730323 3.90647C0.044836 3.99233 -0.255064 4.8509 0.259051 5.36604L1.92992 7.08317C2.31551 7.46952 2.48688 8.02759 2.4012 8.58566L2.01561 10.9896C1.88708 11.7194 2.65825 12.2346 3.3009 11.8911L5.18598
								10.8609C5.7001 10.5604 6.34274 10.5604 6.85686 10.8609L8.74195 11.8911C9.38459 12.2346 10.1129 11.7194 10.0272 10.9896L9.5988 8.58566C9.51226 8.02759 9.68449 7.46952 10.0701 7.08317L11.7409 5.36604C12.2551 4.8509 11.9552 3.99233 11.2697 3.90647L9.04185 3.56305Z" fill="white" data-v-4b953483=""></path></svg><svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" class="star full" data-v-4b953483=""><path opacity="0.8" d="M9.04185 3.56305C8.48489 3.47719 7.97077 3.09084 7.75656 2.5757L6.77117 0.515139C6.47127 -0.171713 5.52873 -0.171713 5.18598 0.515139L4.24344 2.5757C3.98638 3.09084 3.51511 3.47719 2.95815 3.56305L0.730323 3.90647C0.044836 3.99233 -0.255064 4.8509 0.259051 5.36604L1.92992 7.08317C2.31551 7.46952 2.48688 8.02759 2.4012 8.58566L2.01561 10.9896C1.88708 11.7194 2.65825 12.2346 3.3009 11.8911L5.18598 10.8609C5.7001 10.5604 6.34274 10.5604 6.85686 10.8609L8.74195 11.8911C9.38459 12.2346 10.1129 11.7194 10.0272 10.9896L9.5988 8.58566C9.51226 8.02759 9.68449 7.46952 10.0701 7.08317L11.7409 5.36604C12.2551 4.8509 11.9552 3.99233 11.2697 3.90647L9.04185 3.56305Z" fill="white" data-v-4b953483=""></path></svg><svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" class="star full" data-v-4b953483=""><path opacity="0.8" d="M9.04185 3.56305C8.48489 3.47719 7.97077 3.09084 7.75656 2.5757L6.77117 0.515139C6.47127 -0.171713 5.52873 -0.171713 5.18598 0.515139L4.24344 2.5757C3.98638 3.09084 3.51511 3.47719 2.95815 3.56305L0.730323 3.90647C0.044836 3.99233 -0.255064 4.8509 0.259051 5.36604L1.92992 7.08317C2.31551 7.46952 2.48688 8.02759 2.4012 8.58566L2.01561 10.9896C1.88708 11.7194 2.65825 12.2346 3.3009 11.8911L5.18598 10.8609C5.7001 10.5604 6.34274 10.5604 6.85686 10.8609L8.74195 11.8911C9.38459 12.2346 10.1129 11.7194 10.0272 10.9896L9.5988 8.58566C9.51226 8.02759 9.68449 7.46952 10.0701 7.08317L11.7409 5.36604C12.2551 4.8509 11.9552 3.99233 11.2697 3.90647L9.04185 3.56305Z" fill="white" data-v-4b953483=""></path></svg><svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" class="star full" data-v-4b953483=""><path opacity="0.8" d="M9.04185 3.56305C8.48489 3.47719 7.97077 3.09084 7.75656 2.5757L6.77117 0.515139C6.47127 -0.171713 5.52873 -0.171713 5.18598 0.515139L4.24344 2.5757C3.98638 3.09084 3.51511 3.47719 2.95815 3.56305L0.730323 3.90647C0.044836 3.99233 -0.255064 4.8509 0.259051 5.36604L1.92992 7.08317C2.31551 7.46952 2.48688 8.02759 2.4012 8.58566L2.01561 10.9896C1.88708 11.7194 2.65825 12.2346 3.3009 11.8911L5.18598 10.8609C5.7001 10.5604 6.34274 10.5604 6.85686 10.8609L8.74195 11.8911C9.38459 12.2346 10.1129 11.7194 10.0272 10.9896L9.5988 8.58566C9.51226 8.02759 9.68449 7.46952 10.0701 7.08317L11.7409 5.36604C12.2551 4.8509 11.9552 3.99233 11.2697 3.90647L9.04185 3.56305Z" fill="white" data-v-4b953483=""></path></svg><svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" class="star full" data-v-4b953483=""><path opacity="0.8" d="M9.04185 3.56305C8.48489 3.47719 7.97077 3.09084 7.75656 2.5757L6.77117 0.515139C6.47127 -0.171713 5.52873 -0.171713 5.18598 0.515139L4.24344 2.5757C3.98638 3.09084 3.51511 3.47719 2.95815 3.56305L0.730323 3.90647C0.044836 3.99233 -0.255064 4.8509 0.259051 5.36604L1.92992 7.08317C2.31551 7.46952 2.48688 8.02759 2.4012 8.58566L2.01561 10.9896C1.88708 11.7194 2.65825 12.2346 3.3009 11.8911L5.18598 10.8609C5.7001 10.5604 6.34274 10.5604 6.85686 10.8609L8.74195 11.8911C9.38459 12.2346 10.1129 11.7194 10.0272 10.9896L9.5988 8.58566C9.51226 8.02759 9.68449 7.46952 10.0701 7.08317L11.7409 5.36604C12.2551 4.8509 11.9552 3.99233 11.2697 3.90647L9.04185 3.56305Z" fill="white" data-v-4b953483=""></path></svg>
              </div>
              <div class="num-prople">
                <span class="sm-span-def" v-text="dpNum"></span><span class="sm-span-def">人点评</span>
              </div>
            </div>
          </div>
          <div class="nr-body">
            <span class="c-white xm-span-def" v-text="tvTitle"></span>
          </div>
          <div class="tv-go">
            <router-link tag="a" target="_blank" :to="{path:'/search',query:{content:content}}"><button class="tv-go-one">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.625 9.61801C22.4583 10.6765 22.4583 13.3227 20.625 14.3812L9.75 20.6598C7.91667 21.7183 5.625 20.3952 5.625 18.2783L5.625 5.7209C5.625 3.60395 7.91667 2.28085 9.75 3.33933L20.625 9.61801Z" fill="white"></path></svg>
            </button></router-link>
            <button class="tv-go-ones">
              <svg width="20" height="20" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.7012 2.2056C16.3764 1.08408 14.9557 0.49014 13.5124 0.500124C12.2642 0.508758 11.0773 0.968592 9.99888 1.80057C8.91 0.967692 7.70489 0.525487 6.45236 0.525498C5.00637 0.52551 3.58737 1.11472 2.29877 2.2056C0.858947 3.4245 0.231588 5.3246 0.250411 7.2015C0.269277 9.08271 0.934385 11.051 2.22373 12.4956C4.5884 15.1452 7.39076 17.303 8.74689 18.2861C9.49751 18.8302 10.5024 18.8307 11.2538 18.2885C11.8033 17.892 12.5838 17.3076 13.4724 16.5797C13.7928 16.3172 13.8398 15.8447 13.5773 15.5242C13.3148 15.2038 12.8423 15.1568 12.5219 15.4193C11.6613 16.1243 10.9057 16.6899 10.376 17.0722C10.1492 17.2358 9.85326 17.2354 9.62729 17.0716C8.30489 16.113 5.6024 14.0286 3.34284 11.4968C2.32409 10.3554 1.76602 8.75006 1.75034 7.18646C1.73461 5.61856 2.26134 4.20261 3.26795 3.35045C4.34581 2.43798 5.43282 2.02551 6.45238 2.0255C7.46816 2.02549 8.50699 2.43469 9.49557 3.33301C9.7816 3.59292 10.2183 3.59293 10.5043 3.33302C11.5011 2.42732 12.5229 2.007 13.5228 2.00009C14.525 1.99316 15.6103 2.40088 16.732 3.35045C17.7736 4.23224 18.3006 5.71209 18.2462 7.33685C18.2324 7.75083 18.5567 8.09766 18.9707 8.11151C19.3847 8.12536 19.7315 7.80098 19.7454 7.387C19.8103 5.44702 19.1893 3.4654 17.7012 2.2056ZM16 7.75C16 7.33579 15.6642 7 15.25 7C14.8358 7 14.5 7.33579 14.5 7.75V10.0015H12.25C11.8358 10.0015 11.5 10.3373 11.5 10.7515C11.5 11.1657 11.8358 11.5015 12.25 11.5015H14.5V13.75C14.5 14.1642 14.8358 14.5 15.25 14.5C15.6642 14.5 16 14.1642 16 13.75V
							11.5015H18.25C18.6642 11.5015 19 11.1657 19 10.7515C19 10.3373 18.6642 10.0015 18.25 10.0015H16V7.75Z" fill="white"></path></svg>
            </button>
          </div>
          <div class="next-slt-box p-r">
            <div class="tv-slt-b p-a" @click="click(item.id)" :class="[{xz:index === imgFlag },{activeImgB:index === imgFlag }]" v-for="(item, index) in list.items" :key="item.id">
             <div class="tv-slt-pb p-r">
               <div class="tv-slt-one p-a">
                 <img :src="item.tvImg" :alt="item.tvImg">
               </div>
             </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import API from '@/api/AxiosConfig';
import Hls from "hls.js";

    const list = reactive({
      items: [],
      // slt: []
    })
    // const slt = (el) => {
    //   list.slt.push(el)
    // }
const slt = document.getElementsByClassName("tv-slt-b")
    const content = ref(null)
    const pf = ref(null)
    const dpNum = ref(null)
    const tvName = ref(null)
    const tvTitle = ref(null)
    const backImg =ref(null)
    const tvLj =ref(null)
const tvLj2 =ref(null)
const backColor = ref(null)
const  imgFlag = ref(0)
const videoJ = ref(null)
const  hlsjs = new Hls()
    onMounted(() => {
      API({ url: '/api/tv/videotop', method: 'get'}).then(res => {
        list.items = res.data
        pf.value = list.items[0].tvPf
        dpNum.value = list.items[0].tvPfNum
        tvName.value = list.items[0].tvName
        tvTitle.value = list.items[0].tvTitle
        backImg.value = list.items[0].tvImg
        tvLj.value = list.items[0].tvLj
        backColor.value.style = 'background:'+list.items[0].color+';'
      }).catch(err => {

      })
      setTimeout(() => {
        for (let i = 0;i <= slt.length-1;i++){
          csh(i)
        }
      },200)
      setTimeout(() => {
        playerInt()
      },1000)
    })
function playerInt() {
  if (tvLj.value.substring(tvLj.value.length-4) === 'm3u8'){
    if (Hls.isSupported()) {
      hlsjs.loadSource(decodeURIComponent(tvLj.value))
      hlsjs.attachMedia(videoJ.value)

      hlsjs.on(Hls.Events.MANIFEST_PARSED, () => {
        // setTimeout(() => {
        //   startPlayer()
        // },500)
      })
      hlsjs.on(Hls.Events.ERROR, (event, data) => {
        // hlsError.value = true
      })
    }
  }else {
    tvLj2.value = tvLj.value
  }
}
    function csh(i) {
      switch (i){
        case 0:
          slt[i].style = 'left: 20px;'
          i++
          break;
        case 1:
          slt[i].style = 'left: calc(34.5% + 20px);'
          i++
          break;
        case 2:
          slt[i].style = 'left: calc(64% + 20px);'
          i++
          break;
        case 3:
          slt[i].style = 'left: calc(93.5% + 20px);'
          i++
          break;
        case 4:
          slt[i].style = 'left: calc(123% + 20px);'
          i++
          break;
        case 5:
          slt[i].style = 'left: 0;'
          i++
          break;
        default:
          break;
      }
    }
function click(index){
  imgFlag.value = index - 1
  if (index === 1){
    slt[index-1].style ='left: 20px;'
    slt[index].style ='left: calc(34.5% + 20px);'
    slt[index+1].style ='left: calc(64% + 20px);'
    slt[index+2].style ='left: calc(93.5% + 20px);'
    slt[index+3].style ='left: calc(123% + 20px);'
    slt[index+4].style ='left: 0;'
    backColor.value.style = 'background:'+list.items[0].color+';'
  }else if (index === 2){
    slt[index-2].style ='left: 0;'
    slt[index-1].style ='left: 20px;'
    slt[index].style ='left: calc(34.5% + 20px);'
    slt[index+1].style ='left: calc(64% + 20px);'
    slt[index+2].style ='left: calc(93.5% + 20px);'
    slt[index+3].style ='left: calc(123% + 20px);'
    backColor.value.style = 'background:'+list.items[1].color+';'
  }else if (index === 3){
    slt[index-3].style ='left: calc(123% + 20px);'
    slt[index-2].style ='left: 0;'
    slt[index-1].style ='left: 20px;'
    slt[index].style ='left: calc(34.5% + 20px);'
    slt[index+1].style ='left: calc(64% + 20px);'
    slt[index+2].style ='left: calc(93.5% + 20px);'
    backColor.value.style = 'background:'+list.items[2].color+';'
  }else if (index === 4){
    slt[index-4].style ='left: calc(93.5% + 20px);'
    slt[index-3].style ='left: calc(123% + 20px);'
    slt[index-2].style ='left: 0;'
    slt[index-1].style ='left: 20px;'
    slt[index].style ='left: calc(34.5% + 20px);'
    slt[index+1].style ='left: calc(64% + 20px);'
    backColor.value.style = 'background:'+list.items[3].color+';'
  }else if (index === 5){
    slt[index-5].style ='left: calc(64% + 20px);'
    slt[index-4].style ='left: calc(93.5% + 20px);'
    slt[index-3].style ='left: calc(123% + 20px);'
    slt[index-2].style ='left: 0;'
    slt[index-1].style ='left: 20px;'
    slt[index].style ='left: calc(34.5% + 20px);'
    backColor.value.style = 'background:'+list.items[4].color+';'
  }else if (index === 6){
    slt[index-5].style ='left: calc(64% + 20px);'
    slt[index-4].style ='left: calc(93.5% + 20px);'
    slt[index-3].style ='left: calc(123% + 20px);'
    slt[index-2].style ='left: 0;'
    slt[index-1].style ='left: 20px;'
    slt[index-6].style ='left: calc(34.5% + 20px);'
    backColor.value.style = 'background:'+list.items[5].color+';'
  }
  pf.value = list.items[index -1].tvPf
  dpNum.value = list.items[index -1].tvPfNum
  tvName.value = list.items[index -1].tvName
  tvTitle.value = list.items[index -1].tvTitle
  backImg.value = list.items[index -1].tvImg
  tvLj.value = list.items[index -1].tvLj
  playerInt()
}
</script>

<style lang="less" scoped>
.bt-svg{
  width: 35px;
}
.top-title,.tv-waike{
  display: flex;
  position: relative;
}
.one-title{
  display: flex;
  align-items: center;
  margin: 15px 0;
}
.title-one{
  font-size: 25px;
}
.span-def{
  font-family: "黑体";
  font-weight: bold;
}
.maskImg{
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,.3);
}
.backImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tv-slt-b{
  width: 26.5%;
  border-radius: 4px;
  border: 4px solid hsla(0, 23%, 95%, 0.5);
  z-index: 2;
  overflow: hidden;
  transition: 0.4s;
  opacity: 0.75;

}
.activeImgS{
  transform: scale(0.95);
}
.activeImgB{
  width: 31.5%;
  z-index: 5;
}
.tv-slt-pb{
  padding-bottom: 55%;
}
.w-100{
  width: 100%;
}
.num-def{
  position: relative;
  top: -15px;
}
.c-white{
  color: white;
}
.xm-span-def{
  font-size: 13px;
}
.p-r{
  position: relative;
}
.p-a{
  position: absolute;
}
.pf-title{
  font-size: 40px;
}
.title-bt{
  font-size: 30px;
  padding: 15px 20px 0 0;
  margin-bottom: 10px;
}
.num-def{
  font-family: "AvQest";
  font-style:oblique;
  position: relative;
  top: 6px;
}
.sm-span-def{
  font-size: 10px;
  color: #FFFFFF99;
}

.one-title{
  width: 85%;
  display: flex;
  align-items: center;
  max-width: 1790px;
  margin-top: 15px;
}
.up-list-all{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}
.up-list{
  display: flex;
  flex-direction: row;
  width: 85%;
  max-width: 1790px;
  /* min-width: 1180px; */
}

.up-list-one{
  margin: 25px 10px 10px 0;
}
.up-list-one>img{
  object-fit: cover;
  border-radius: 8px;
}
.weekday{
  border-radius: 10px;
  padding: 2px 10px;
  position: absolute;
  font-family: "黑体";
  font-weight: bold;
  top: -12px;
}
.right-button{
  width: 50px;
  height: 50px;
  border-radius: 50px;
  right: -20px;
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  top: calc(50% - 25px);;
  z-index: 2;
  box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
  border: 1px solid #f1f2f3;
  transition: transform .2s,-webkit-transform .2s;
}
.tv-show-box{
  z-index: 5;
}
.show-tv-one{
  display: flex;
  width: 60%;
  /* background-color: cornflowerblue; */
  border-radius: 8px;
  z-index: 5;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.xq-tv-one{
  display: flex;
  justify-content: flex-end;
  left: 5%;
  width: 95%;
  height: 100%;
  top: 25px;
  border-radius: 8px;
  overflow: hidden;
  //background: rgb(243, 59, 46);
}
.xq-list-one{
  width: 40.4%;
  display: flex;
  flex-direction: column;
  padding: 15px 0 15px 30px;
  justify-content: flex-end;
  z-index: 2;
  overflow: hidden;
}
.pf-box{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.pf-one{
  display: flex;
  align-items: center;
}
.dp-box{
  margin-left: 15px;
}
.video-de{
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: flex;
}
.nr-body{
  padding: 10px 25px 20px 0;
}
.tv-go{
  display: flex;
  flex-direction: row;
}
.tv-go-one{
  width: 50px;
  height: 50px;
  background-color: hsla(0,0%,100%,.2);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  //margin-right: 25px;
  border: none;
}
.tv-go-ones{
  width: 50px;
  height: 50px;
  background-color: hsla(0,0%,100%,.2);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  margin-left: 25px;
  border: none;
}
.next-slt-box{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  margin-top: 30px;
  width: 100%;
  height: 25%;
  overflow: hidden;
  //padding: 15px 0 35px 0;
}
.tv-slt-one{
  //width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  //border-radius: 4px;
}
.tv-slt-one>img{
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 2px;
}
.back-img{
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: .15;
  z-index: -1;
}
.xz{
  opacity: 1;
  z-index: 5;
  border: 4px solid #cecece;
}
@media screen and (min-width: 2061px) {
  .tv-waikeB,.top-title {
    width: 1784px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1559.8px) and (max-width: 2060.8px) {
  .tv-waikeB,.top-title {
    margin: 0 140px 0 140px;
  }
  .title-bt{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    overflow: hidden;
  }
  .next-slt-box{
    margin-top: 20px;
    height: 26.5%;
  }
}
@media screen and (min-width: 1559.8px) and (max-width: 1700.8px) {
  .xm-span-def{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    overflow: hidden;
  }
  .title-bt{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
    overflow: hidden;
  }
  .next-slt-box{
    margin-top: 20px;
    height: 26.5%;
  }
}
@media screen and (min-width: 1400px) and (max-width: 1559.8px) {
  .tv-waikeB,.top-title {
    margin: 0 60px 0 60px;
  }
  .xq-list-one{
    width: 40%;
  }
  .next-slt-box{
    margin-top: 20px;
    height: 26.5%;
  }
  .xm-span-def{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    overflow: hidden;
  }
  .title-bt{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
    overflow: hidden;
  }
}
@media screen and (min-width: 1301px) and (max-width: 1399.8px) {
  .tv-waikeB,.top-title {
    width: 1180px;
    margin: 0 auto;
  }
  .xm-span-def{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    overflow: hidden;
  }
  .title-bt{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
    overflow: hidden;
  }
  .next-slt-box{
    margin-top: 20px;
    height: 26.5%;
  }
  .xq-list-one{
    width: 40%;
  }
}
@media screen and (min-width: 1140px) and (max-width: 1300.8px) {
  .tv-waikeB,.top-title{
    margin: 0 60px;
  }
  .xm-span-def,.title-bt{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
    overflow: hidden;
  }
  .nr-body{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .next-slt-box{
    margin-top: 15px;
    height: 26%;
  }
  .xq-list-one{
    width: 39.6%;
  }
}
@media screen and (max-width: 1139.8px) {
  .tv-waikeB,.top-title {
    width: 1020px;
    margin: 0 auto;
  }
  .xm-span-def,.title-bt{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
    overflow: hidden;
    padding-top: 0;
  }
  .nr-body{
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .next-slt-box{
    margin-top: 15px;
    height: 27%;
  }
  .xq-list-one{
    width: 40%;
  }
}
.tv-waikeB {
  margin-bottom: 40px;
}
</style>
